{% extends "base.html" %}

{% block title %}发布新帖 - SteHub{% endblock %}

{% block extra_css %}
<style>
.editor-toolbar {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: none;
    padding: 8px;
    border-radius: 4px 4px 0 0;
}
.editor-textarea {
    border-radius: 0 0 4px 4px;
}
.preview-area {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    min-height: 200px;
    background: #f8f9fa;
}
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-edit me-2"></i>发布新帖</h4>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('forum.create_post') }}" id="postForm">
                    <div class="mb-3">
                        <label for="title" class="form-label">帖子标题</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               required maxlength="200" placeholder="请输入帖子标题...">
                        <div class="form-text">标题应简洁明了，能够准确描述帖子内容</div>
                    </div>

                    <div class="mb-3">
                        <label for="category_id" class="form-label">选择分类</label>
                        <select class="form-select" id="category_id" name="category_id" required>
                            <option value="">请选择分类</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" style="color: {{ category.color }};">
                                {{ category.name }} - {{ category.description }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">帖子内容</label>
                        
                        <!-- 编辑器工具栏 -->
                        <div class="editor-toolbar">
                            <div class="btn-group btn-group-sm me-2" role="group">
                                <button type="button" class="btn btn-outline-secondary" data-format="bold">
                                    <i class="fas fa-bold"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="italic">
                                    <i class="fas fa-italic"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="underline">
                                    <i class="fas fa-underline"></i>
                                </button>
                            </div>
                            <div class="btn-group btn-group-sm me-2" role="group">
                                <button type="button" class="btn btn-outline-secondary" data-format="link">
                                    <i class="fas fa-link"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="image">
                                    <i class="fas fa-image"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="code">
                                    <i class="fas fa-code"></i>
                                </button>
                            </div>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary" data-format="list-ul">
                                    <i class="fas fa-list-ul"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="list-ol">
                                    <i class="fas fa-list-ol"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" data-format="quote">
                                    <i class="fas fa-quote-right"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 内容编辑器 -->
                        <textarea class="form-control editor-textarea" id="content" name="content" 
                                  rows="15" required placeholder="请输入帖子内容...支持Markdown语法"></textarea>
                        
                        <div class="form-text">
                            支持 Markdown 语法，可以插入代码、图片、链接等
                        </div>
                    </div>

                    <!-- 预览区域 -->
                    <div class="mb-3">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="togglePreview">
                            <i class="fas fa-eye me-1"></i>预览内容
                        </button>
                        <div id="previewArea" class="preview-area mt-2 d-none"></div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-2"></i>发布帖子
                        </button>
                        <a href="{{ url_for('forum.posts') }}" class="btn btn-outline-secondary">
                            取消
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Markdown 语法参考 -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-markdown me-2"></i>Markdown 语法参考</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <td><code>**粗体**</code></td>
                                <td><strong>粗体</strong></td>
                            </tr>
                            <tr>
                                <td><code>*斜体*</code></td>
                                <td><em>斜体</em></td>
                            </tr>
                            <tr>
                                <td><code>[链接](URL)</code></td>
                                <td><a href="#">链接</a></td>
                            </tr>
                            <tr>
                                <td><code>- 列表项</code></td>
                                <td>• 列表项</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <td><code># 标题</code></td>
                                <td><h6 class="mb-0">标题</h6></td>
                            </tr>
                            <tr>
                                <td><code>> 引用</code></td>
                                <td><blockquote class="mb-0 small">引用</blockquote></td>
                            </tr>
                            <tr>
                                <td><code>`代码`</code></td>
                                <td><code>代码</code></td>
                            </tr>
                            <tr>
                                <td><code>![图片](URL)</code></td>
                                <td>图片</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contentTextarea = document.getElementById('content');
    const previewArea = document.getElementById('previewArea');
    const togglePreview = document.getElementById('togglePreview');
    const toolbarButtons = document.querySelectorAll('.editor-toolbar button');

    // 工具栏按钮功能
    toolbarButtons.forEach(button => {
        button.addEventListener('click', function() {
            const format = this.dataset.format;
            const start = contentTextarea.selectionStart;
            const end = contentTextarea.selectionEnd;
            const selectedText = contentTextarea.value.substring(start, end);
            
            let formattedText = '';
            
            switch(format) {
                case 'bold':
                    formattedText = `**${selectedText}**`;
                    break;
                case 'italic':
                    formattedText = `*${selectedText}*`;
                    break;
                case 'underline':
                    formattedText = `<u>${selectedText}</u>`;
                    break;
                case 'link':
                    formattedText = `[${selectedText}](URL)`;
                    break;
                case 'image':
                    formattedText = `![${selectedText}](图片URL)`;
                    break;
                case 'code':
                    formattedText = `\`${selectedText}\``;
                    break;
                case 'list-ul':
                    formattedText = `- ${selectedText}`;
                    break;
                case 'list-ol':
                    formattedText = `1. ${selectedText}`;
                    break;
                case 'quote':
                    formattedText = `> ${selectedText}`;
                    break;
            }
            
            contentTextarea.setRangeText(formattedText, start, end, 'select');
            contentTextarea.focus();
        });
    });

    // 预览功能
    togglePreview.addEventListener('click', function() {
        if (previewArea.classList.contains('d-none')) {
            // 显示预览
            const content = contentTextarea.value;
            // 简单的Markdown预览（实际项目中应该使用完整的Markdown解析器）
            let html = content
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/\*(.*?)\*/g, '<em>$1</em>')
                .replace(/`(.*?)`/g, '<code>$1</code>')
                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
                .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1" class="img-fluid">')
                .replace(/> (.*)/g, '<blockquote>$1</blockquote>')
                .replace(/- (.*)/g, '<li>$1</li>')
                .replace(/\n/g, '<br>');
            
            previewArea.innerHTML = html;
            previewArea.classList.remove('d-none');
            togglePreview.innerHTML = '<i class="fas fa-eye-slash me-1"></i>隐藏预览';
        } else {
            // 隐藏预览
            previewArea.classList.add('d-none');
            togglePreview.innerHTML = '<i class="fas fa-eye me-1"></i>预览内容';
        }
    });

    // 表单提交前验证
    document.getElementById('postForm').addEventListener('submit', function(e) {
        const title = document.getElementById('title').value.trim();
        const content = document.getElementById('content').value.trim();
        const category = document.getElementById('category_id').value;
        
        if (!title) {
            e.preventDefault();
            alert('请输入帖子标题');
            return;
        }
        
        if (!content) {
            e.preventDefault();
            alert('请输入帖子内容');
            return;
        }
        
        if (!category) {
            e.preventDefault();
            alert('请选择帖子分类');
            return;
        }
    });
});
</script>
{% endblock %}